<template>
	<div>
		<nav-bar>			<template v-slot:left>
				<img src="~assets/images/left.png" alt="return icon">
			</template>
			<template v-slot:center>用户登录</template>
		</nav-bar>
		<div style="margin-top: 50px">
			<van-image
					width="10rem"
					height="10rem"
					fit="contain"
					src="https://img01.yzcdn.cn/vant/cat.jpeg"
			/>
			<van-form @submit="onSubmit">
				<van-field
						v-model="email"
						name="用户名"
						label="邮箱"
						placeholder="用户名"
						:rules="[{ required: true, message: '请填写邮箱' }]"
				/>
				<van-field
						v-model="password"
						type="password"
						name="密码"
						label="密码"
						placeholder="密码"
						:rules="[{ required: true, message: '请填写密码' }]"
				/>
				
				
				<div style="margin: 16px;">
					<div class="link-top" @click="$router.push({path:'/register'})">
						没有账号? 立即注册
					</div>
					<van-button round block type="info" native-type="submit" color="#44b883">提交</van-button>
				</div>
			</van-form>
		</div>
	
	
	</div>

</template>

<script>
import {ref, reactive,toRefs} from 'vue'
import NavBar from "@/components/common/navbar/NavBar";
import {login} from "@/network/user";
import {Toast} from 'vant' // 有赞轻提示
import {useRouter} from 'vue-router'

export default {
	name: "Login",
	components: {
		NavBar,
	},
	setup() {
		const router = useRouter()
		const userInfo = reactive({
			email:'',
			password:'',
		
		})
		const onSubmit = ()=>{
				login(userInfo).then(res=>{
					console.log(res)
						window.localStorage.setItem('taken',res.access_token) // 保存token到硬盘
					Toast.success('登录成功')
						userInfo.password = '' //清空密码
						userInfo.email = '' // 清空账号
					setTimeout(()=>{
						router.go(-1) // 跳转上一个页面
					},500)
				}).catch()
			}
		
		return {
			...toRefs(userInfo),
			onSubmit
		}
	}
}
</script>

<style scoped>
.link-top{
	bottom: 15px;
	float: left;
	color: #44b883;
}
</style>